<template>
	<view class="main" :style="contentPB">
		<div class="top">
			<div class="left">
				<u-avatar :src="otherInfo.avatar" size="80"></u-avatar>
				{{otherInfo.nickname}}
			</div>
			<div class="right">
				<u-icon name="more-dot-fill"></u-icon>
			</div>
		</div>
		<div class="content">
			<div class="content-item">
				<!-- <div class="time">20:24</div> -->
				<div class="message" v-for="item in messages" :key="item.chat_id">
					<div class="text">
						<div class="left" v-if="user2_id == item.user2_id">{{item.content}}</div>
						<div class="right" v-else>{{item.content}}</div>
					</div>
					<div class="img" :style="user2_id == item.user2_id ? otherStyle : myStyle">
						<u-avatar :src="user2_id == item.user2_id ? item['user1.avatar'] : item['user2.avatar']"
							size="90"></u-avatar>
					</div>
				</div>
			</div>
		</div>
		<div class="input-area" ref="input-area">
			<div class="top-tools">
				<u-icon name="mic" size="60"></u-icon>
				<input type="text" v-model="inputValue" auto-blur @focus="showSend()" @blur="closeSend()" />
				<u-icon name="gift" size="60"></u-icon>
				<button class="sendBtn" v-show="showBtn" @click="sendMessage">发送</button>
				<u-icon name="plus-circle" size="60" @click="showT()" v-show="!showBtn"></u-icon>

			</div>
			<div class="tools" v-show="showTools">
				<u-grid :col="4" :border="false">
					<u-grid-item>
						<u-icon name="photo" :size="46"></u-icon>
						<view class="grid-text">相册</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="camera" :size="46"></u-icon>
						<view class="grid-text">拍摄</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="phone" :size="46"></u-icon>
						<view class="grid-text">语音</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">视频</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="map" :size="46"></u-icon>
						<view class="grid-text">位置</view>
					</u-grid-item>
				</u-grid>
			</div>
		</div>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref,
		onBeforeMount
	} from 'vue';
	import {
		getOneUserChatList
	} from '../../api/chat.js'
	
	//传过来的id
	const user2_id = ref(1)
	//聊天这个人的信息
	const otherInfo = ref({})
	//自己的信息
	const myInfo = ref({})
	onMounted(async () => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();

		eventChannel.emit('acceptDataFromOpenedPage', {
			data: 'data from detail page'
		});

		eventChannel.emit('someEvent', {
			data: 'data from detail page for someEvent'
		});
		//获取传过来的id
		eventChannel.on('acceptDataFromOpenerPage', async function(data) {
			user2_id.value = data.user2_id
			otherInfo.value = data.user2
			myInfo.value = data.user1
			//根据id查找聊天记录
			const result = await getOneUserChatList({
				user1_id: data.user1_id,
				user2_id: data.user2_id
			})
			messages.value = result.data
		})
		//实时聊天
		socketConnect()
	})
	onBeforeMount(() => {
		socketClose()
	})



	//这个聊天框里面的信息
	const messages = ref([

	])
	//控制头像位置
	const myStyle = reactive({
		right: 0,
		marginRight: '20rpx',
		textAlign: 'right'
	})
	const otherStyle = {
		left: 0,
		marginLeft: '20rpx',
		textAlign: 'left'
	}
	//输入框信息
	const inputValue = ref('')
	//发送按钮显示
	const showBtn = ref(true)
	//隐藏工具展示
	const showTools = ref(false)
	//输入框聚焦时展示showBtn
	const showSend = () => {
		showBtn.value = true
		showTools.value = false
		contentPB.value.paddingBottom = '370rpx'
	}
	const closeSend = () => {
		showBtn.value = false
		contentPB.value.paddingBottom = '120rpx'
	}
	//main部分的pdding-bottom修改
	const contentPB = ref({
		paddingBottom: '120rpx'
	})
	//点击展示工具部分并且修改main的padding-bottom值
	const showT = () => {
		showTools.value = !showTools.value
		if (!showTools.value) {
			contentPB.value.paddingBottom = '120rpx'
		} else {
			contentPB.value.paddingBottom = '370rpx'
		}

	}
	const socket = ref('')
	const socketConnect = () => {
		 socket.value = uni.connectSocket({
			url: 'ws://localhost:3000/realtime/chat',
			method:'GET',
			complete: () => {}
		});
		console.log('socket',socket)
		socket.value.onOpen(() => {
			console.log('连接成功')
		})
		socket.value.onError((Error) => {
			console.log('Error',Error)
		})
		socket.value.onMessage((data) => {
			const dataObj = JSON.parse(data.data)
			messages.value.push(dataObj.content[0])
		})
	}
	const socketClose = () => {
		if(socket.value){
			socket.value.close()
		}
	}

	const sendMessage = () => {
		const user1_id = uni.getStorageSync('userInfo').user_id; 
		const user2_id = otherInfo.value.user_id; 
		const message = {
			user1_id: user1_id,
			user2_id: user2_id,
			content: inputValue.value,
			create_time: new Date()
		};
		socket.value.send({
			data:JSON.stringify(message),
			success:(res) => {
				console.log('res:',res)
			},
			fail:(err) => {
				console.log(err)
			}
		});
		inputValue.value = ''
	};
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		// background: linear-gradient(to bottom, #94fff8, #d0fffc);
		background-color: #f7f7f7;
		position: relative;

		//顶部信息部分
		.top {
			width: 100%;
			height: 120rpx;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #fff;
			z-index: 9;

			.left {
				width: 50%;
				height: 80rpx;
				letter-spacing: 5rpx;
				margin-left: 5%;

				u-avatar {
					vertical-align: middle;
					margin-right: 10rpx;
				}
			}

			.right {
				width: 10%;
				height: 100%;
				line-height: 80rpx;
			}
		}

		//聊天内容部分
		.content {
			display: flex;
			flex-direction: column;
			margin-top: 140rpx;

			.content-item {
				display: flex;
				flex-direction: column;

				.time {
					width: 100rpx;
					height: 60rpx;
					margin-left: calc(50% - 50rpx);
					line-height: 60rpx;
					background-color: rgba(0, 0, 0, .1);
					font-size: 24rpx;
					color: #fff;
					text-align: center;
				}

				.message {
					margin-top: 30rpx;
					position: relative;

					.text {
						max-width: 64%;
						// width: fit-content;
						margin-left: 18%;

						.left {
							float: left;
							padding: 20rpx;
							background-color: #fff;
							border-radius: 10rpx;
						}

						.right {
							float: right;
							padding: 20rpx;
							background-color: lightblue;
							border-radius: 10rpx;
						}
					}

					.text::after {
						content: '';
						height: 0;
						visibility: hidden;
						clear: both;
					}

					.img {
						position: absolute;
						top: 0;
					}
				}
			}
		}

		//底下输入框部分
		.input-area {
			position: fixed;
			bottom: 0;
			left: 0;

			.top-tools {
				width: 100vw;
				height: 100rpx;
				display: flex;
				justify-content: space-evenly;
				background-color: #fff;

				line-height: 100rpx;

				input {
					width: 400rpx;
					height: 70rpx;
					margin: 15rpx 0;
					border: 1px solid #e7e7e7;
				}

				.sendBtn {
					height: 70rpx;
					line-height: 70rpx;
					font-size: 30rpx;
					margin: 15rpx 0;
				}
			}

			.tools {
				height: 270rpx;
				background-color: #fff;

			}
		}

	}
</style>